import {
  getUserApi,
  updateUserStateApi,
  addUserApi,
  deleteUserApi,
  updateUserApi,
  updateUserRoleApi
} from '@/api/user'
import {
  getRoleListApi
} from '@/api/role'
// 导入mixin
import dialog from '@/mixins/addDialogClosed'
export default {
  // 使用minin
  mixins: [dialog],
  data() {
    // 自定义验证规则
    // 验证邮箱的规则
    const checkEmail = (rule, value, callback) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的邮箱'))
    }
    // 验证手机号码的规则
    const checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的手机号'))
    }
    return {
      queryInfo: {
        // 当前页码
        pagenum: 1,
        // 每页显示条数
        pagesize: 2,
        // 查询条件（搜索使用）
        query: ''
      },
      // 总记录数
      total: 0,
      // 用户数据
      userlist: [],
      // 添加用户的模态框状态
      addDialogVisible: false,
      // 添加用户
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 添加用户的验证规则
      addFormRules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }, {
          min: 3,
          max: 10,
          message: '用户名的长度在3-10个字符之间',
          trigger: 'blur'
        }],
        password: [{
            required: true,
            message: '请输入用户密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '用户密码的长度在6-15个字符之间',
            trigger: 'blur'
          }
        ],
        email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        mobile: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ]
      },
      // 修改用户的模态框状态
      editDialogVisible: false,
      // 修改的数据
      editForm: {
        id: '',
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 修改的验证规则
      editFormRules: {
        email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
        mobile: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }
        ]
      },
      // 分配用户角色
      setRoleDialogVisible: false,
      // 要分配角色的用户信息
      userinfo: {},
      // 获取所有的角色列表信息
      roleList: [],
      // 修改后的用户角色id
      selectedRoleId: '请选择'

    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 重新分配角色
    async showRoleDialog(user) {
      this.userinfo = user
      this.selectedRoleId = user.role_id
      // 查询出所有的角色列表
      this.roleList = await getRoleListApi()
      this.setRoleDialogVisible = true
    },

    // 监听分配角色的弹出窗的关闭事件
    setRoleDialogClosed() {
      this.selectedRoleId = ''
    },
    // 修改角色
    async saveRoleInfo() {
      if (this.selectedRoleId === '') {
        return this.$message.error('请选择要分配的角色!')
      }
      await updateUserRoleApi(this.userinfo.id, this.selectedRoleId)
      this.$message.success('分配角色成功')
      this.setRoleDialogVisible = false
      this.getUserList()
    },
    // 修改用户
    // 显示弹出层
    showEditDialog(user) {
      this.editForm = user
      this.editDialogVisible = true
    },
    // 监听关闭层的事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    editUser() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('验证不通过')
        }
        await updateUserApi(this.editForm.id, this.editForm)
        this.$message.success('修改成功')
        this.editDialogVisible = false
        this.getUserList()
      })
    },
    // 删除用户
    async deleteUser(user) {
      try {
        await this.$msb.confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 实现删除操作
        await deleteUserApi(user.id)
        this.$message.success('删除用户成功')
        // 当前页的数据条数小于每页显示的记录数
        if (this.userlist.length < this.queryInfo.pagesize) {
          // 改成请求上一页的数据
          this.queryInfo.pagenum = this.queryInfo.pagenum - 1
        }
        this.getUserList()
      } catch (e) {
        this.$message.info('已取消删除')
      }
    },
    // 添加用户
    addUser() {
      // 验证表单数据并提交
      this.$refs.addFormRef.validate(async valid => {
        if (valid) {
          await addUserApi(this.addForm)
          this.$message.success('用户添加成功')
          // 关闭层
          this.addDialogVisible = false
          // 重新发起网络请求
          this.getUserList()
        } else {
          this.$message.error('验证不通过')
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.addFormRef.resetFields()
    },
    /*   // 监听对话框的关闭事件
      addDialogClosed() {
        this.$refs.addFormRef.resetFields()
      }, */

    // 获取数据
    async getUserList() {
      const res = await getUserApi(this.queryInfo)
      console.log(res)
      // 不要显示超级管理员
      this.userlist = res.users
      this.total = res.total
    },
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },
    // 改变用户的状态
    async userStateChanged(user) {
      // 进行数据库的修改，需要uid及修改后的状态度
      const id = user.id
      const mgState = user.mg_state
      try {
        await updateUserStateApi(id, mgState)
        this.$message.success('修改成功')
      } catch (e) {
        this.$message.error(e.message)
        // 修改不成功，用户状态还是保留修改前的状态
        user.mg_state = !user.mg_state
      }
    }
  }
}
